<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="现金订单详情" fixed :border="false" height="88rpx" left-icon="left"
      @clickLeft="onClickLeft" background-color="#f7f7f7"></uni-nav-bar>
    <scroll-view class="scroll-view_H" scroll-y @refresherrefresh="refresherrefreshFn" refresher-enabled="true"
      :show-scrollbar="false" :refresher-triggered="triggered" enhanced
      style="height: calc(100% - var(--window-top) - 88rpx)">
      <view class="infoCard" v-for="(item, i) in orderList" :key="item.id + i"  @click="$navTo('./payOrderDetail', { id: item.id, obj: JSON.stringify(item) })">
        <view class="tokenNum">
          <view class="count u-ellipsis goodsname">{{ item.bookingTime | parseTime('YYYY-MM-DD HH:mm:ss') }}</view>
          <view class="count">订单金额：{{ item.receiptsMoney }}元</view>
        </view>
        <view class="goodsBox">
          <view class="left">
            <view class="imgBox">
              <image :key="index" class="img" :src="items ? items : '/static/index/noneImg.png'"
                v-for="(items, index) in item.imgUrlList" mode="aspectFill"></image>
            </view>
            <view class="name" v-if="item.commodityList.length == 1">
              <view class="brand u-ellipsis">{{ item.commodityName }}</view>
              <view class="brand u-ellipsis">品牌：{{ item.commodityBrand ? item.commodityBrand : '无' }}</view>
            </view>
          </view>
          <view class="right">
            <uni-icons type="right" size="30"
             ></uni-icons>
          </view>
        </view>
        <view class="tokenNum">
          <view class="count">共{{ item.commodityList.length }}件商品</view>
          <view class="count" v-if="payState == '0'">线上付款：未付款</view>
          <view class="count" v-if="payState == '1'">线上付款：已付款</view>
        </view>
      </view>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="orderList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { reqCashOrderDetail } from '@/apis/member.js'
export default {
  name: "InventoryInfo",
  data() {
    return {
      active: '',
      orderList: [], // 供应链标品
      page: {
        pageNum: 1,
        pageSize: 15
      },
      orderId: '',
      payState: '',
      cashMoney: '',
      triggered: false, // 是否触发下拉刷新
      loading: 'loading', // 是否触发上拉加载
    }
  },
  onLoad(params) {
    this.orderId = params?.id
    console.log('orderId:', this.orderId);
    this.reqCashOrderDetail()

  },
  onShow() {
  },
  methods: {
    refresherrefreshFn() {
      this.orderList = []
      this.triggered = true
      this.reqCashOrderDetail()

    },
    async reqCashOrderDetail() {
      const res = await reqCashOrderDetail({ ...this.page, id: this.orderId })
      if (res.code === 200) {
        console.log('orderList:', res.data);
        this.orderList = res.data.cashierOrderList
        this.payState = res.data.payState
        this.cashMoney = res.data.cashiercashMoney
        this.triggered = false
      }
    },
  }
}
</script>
<style>
page {
  background: #f7f7f7;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #f7f7f7;

}

view {
  box-sizing: border-box;
}

.topTag {
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #eee;

  .tag {
    width: 20%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    color: #999;

    &.activeTag {

      color: $uni-main-bgColor;
      font-weight: bold;
      border-bottom: 4rpx solid $uni-main-bgColor;
    }
  }
}

.goodsname {
  font-weight: 600;
}


.infoCard {
  background-color: #edf2fa;
  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  padding: 20rpx 30rpx;
  align-items: center;
  height: 280rpx;
  line-height: 50rpx;
  border: 1px solid #d3e3fd;


  .tokenNum {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      // padding-left: 10rpx;
    }

    .count:nth-child(2n) {
      // width: 48%;
      // padding-left: 10rpx;
      text-align: right;
    }
  }
}

.goodsBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 140rpx;
  padding: 10rpx 0;

  .left {
    width: 88%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    overflow: hidden;

    .img {
      box-sizing: border-box;
      border: 1px solid #fff;
      height: 120rpx;
      width: 120rpx;
      margin-right: 20rpx;
    }

    .name {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }

  .right {
    width: 10%;
  }
}
</style>
